<template>
    <div class="l-body">
        <LayoutHeader />

        <div class="l-main">
            <router-view />
        </div>

        <LayoutFooter />
    </div>
</template>

<script setup>
import LayoutHeader from './layout-header';
import LayoutFooter from './layout-footer';
</script>

<style lang="scss" scoped>
.l-body {
    height: 100%;
    display: flex;
    flex-direction: column;

    .l-main {
        flex: 1;
    }
}
</style>

<style lang="scss">
.layout-flex {
    height: 100vh;

    #app {
        height: 100%;
    }
}
</style>
